<template>
  <div class="scheme-list pd-20">
    <el-button type="primary"
               @click="handleOption('add','null')">新 增</el-button>
    <el-table :data="tableData"
              border
              style="width: 100%"
              class="mt-20">
      <el-table-column prop="name"
                       label="方案名称"
                       width="180">
      </el-table-column>
      <el-table-column prop="relateProducts"
                       label="关联设备"
                       width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.relateProducts === 1">个人版/个人包</span>
          <span v-if="scope.row.relateProducts === 2">全家版/全家包</span>
        </template>
      </el-table-column>
      <el-table-column prop="relateTarget"
                       label="关联指标">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.relateTarget"
                :key="index">
            <label v-if="item === '1'">血糖</label>
            <label v-if="item === '2'">血酮</label>
            <label v-if="item === '3'">尿酸</label>
            <label v-if="item === '4'">总胆固醇</label>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="dataCount"
                       label="数据条数">
      </el-table-column>
      <el-table-column prop="op"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handleOption('edit',scope.row)">编 辑</el-button>
          <el-button type="danger"
                     @click="handleDel(scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增、编辑 -->
    <el-dialog :title="title"
               :visible.sync="dialogVisible"
               width="30%"
               @close="dialogVisible = false">
      <el-form :model="formModel"
               :rules="formRules"
               ref="formRefs"
               label-width="100px">
        <el-form-item label="方案名称"
                      prop="name">
          <el-input v-model="formModel.name"
                    placeholder="请输入方案名称"
                    class="w-200"></el-input>
        </el-form-item>
        <el-form-item label="关联设备"
                      prop="relateProducts">
          <el-select v-model="formModel.relateProducts"
                     placeholder="请选择关联设备"
                     clearable
                     @change="chagneRelateProducts">
            <el-option v-for="item in relateProductsList"
                       :label="item.label"
                       :value="item.key"
                       :key="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联指标"
                      prop="relateTarget">
          <el-select v-model="formModel.relateTarget"
                     placeholder="请选择关联指标"
                     clearable
                     multiple
                     @change="chagneRelateTargets">
            <el-option v-for="item in relateTargetList"
                       :label="item.label"
                       :value="item.key"
                       :key="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据条数"
                      prop="dataCount">
          <el-input v-model="formModel.dataCount"
                    placeholder="请输入数据条数"
                    class="w-200"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm(isOption)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'schemeList',
    data () {
      return {
        tableData: [],
        dialogVisible: false,
        title: '',
        formModel: {
          name: '', // 方案名称
          relateProducts: '', // 关联设备
          relateTarget: '', // 关联指标
          dataCount: '' // 数据条数
        },
        relateProductsList: [
          { key: 1, label: '个人版/个人包' },
          { key: 2, label: '全家版/全家包' }
        ],
        relateTargetList: [
          { key: 1, label: '血糖' },
          { key: 2, label: '血酮' },
          { key: 3, label: '尿酸' },
          { key: 4, label: '总胆固醇' }
        ],
        formRules: {
          name: [
            { required: true, message: '请输入方案名称', trigger: 'blur' },
            { max: 10, message: '长度在10个字符以内', trigger: 'blur' }
          ],
          relateProducts: [
            { required: true, message: '请选择关联设备', trigger: 'change' }
          ],
          relateTarget: [
            { required: true, message: '请选择关联指标', trigger: 'change' }
          ],
          dataCount: [
            { required: true, message: '请输入数据条数', trigger: 'blur' }
          ],
        },
        isOption: '' // 保存时,判断是新增保存，还是编辑后保存
      }
    },
    methods: {
      // 获取数据
      async getList () {
        const { data: res } = await this.post(this.api.schemeManager.querySchemes)
        if (res.code === '200') {
          this.tableData = res.object
        } else {
          this.$message.error(res.message)
        }
      },
      // 操作
      async handleOption (op, row) {
        this.dialogVisible = true
        switch (op) {
          case 'add':
            this.title = '新增方案'
            this.isOption = 'add'
            if (this.$refs['formRefs'] != undefined) {
              this.$refs['formRefs'].resetFields();
            }
            break
          case 'edit':
            this.title = '编辑方案'
            this.isOption = 'edit'
            const { data: res } = await this.post(this.api.schemeManager.getSchemaId, {
              schemaId: row.id
            })
            if (res.code === '200') {
              let resData = res.object
              this.formModel = resData
              if (resData.relateTarget.length > 1) {
                if (resData.relateTarget.indexOf(',') != -1) {
                  this.formModel.relateTarget = resData.relateTarget.split(',').map(Number)
                }
              } else if (resData.relateTarget.length === 1) {
                this.formModel.relateTarget = [Number(resData.relateTarget)]
              }
            } else {
              this.$message.error(res.message)
            }

            break
        }
      },
      // 选择关联设备
      chagneRelateProducts (val) {
        this.formModel.relateProducts = val
      },
      // 选择关联指标
      chagneRelateTargets (val) {
      },
      // 删除
      handleDel (row) {
        this.$confirm('确认删除？')
          .then(_ => {
            this.post(this.api.schemeManager.delSchemes, { schemeId: row.id }).then(res => {
              if (res.data.code === '200') {
                this.$message.success('删除成功')
                this.getList()
              } else {
                this.$message.error(res.data.message)
              }
            })
          })
          .catch(_ => { });
      },
      // 提交
      submitForm (isOption) {
        if (isOption === 'add') {
          this.$refs['formRefs'].validate(async (valid) => {
            if (valid) {
              this.formModel.relateTarget = this.formModel.relateTarget.join(',')
              const { data: res } = await this.post(this.api.schemeManager.addScheme, this.formModel)
              if (res.code === '200') {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            }
          });
        } else if (isOption === 'edit') {
          this.$refs['formRefs'].validate(async (valid) => {
            if (valid) {
              this.formModel.schemeId = this.formModel.id
              this.formModel.relateTarget = this.formModel.relateTarget.join(',')
              const { data: res } = await this.post(this.api.schemeManager.modifySchemes, this.formModel)
              if (res.code === '200') {
                this.$message.success('保存成功')
                this.dialogVisible = false
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            }
          });
        }
      },
    },
    created () {
      this.getList()
    }
  }
</script>
<style scoped>
</style>